<template>
  <div class="tuijian-details">
    <section class="wboxnoborder">
          <div v-show="loading">读取中...</div>
          <el-form ref="form"
            v-show="!loading"
            :model="tuijianForm"
            label-width="150px"
            label-position="right"
            :inline="true">
            <el-form-item label="推荐单位">
              <span class="selectioncontent">
                {{recommendJson.recommendUnit}}
              </span>
            </el-form-item>
            <el-form-item label="推荐方式">
              <span class="selectioncontent" v-if="recommendJson.recommendType===1">只谈话调研推荐</span>
              <span class="selectioncontent" v-if="recommendJson.recommendType===2">先谈话调研推荐再会议推荐</span>
              <span class="selectioncontent" v-if="recommendJson.recommendType===3">先会议推荐再谈话调研推荐</span>
            </el-form-item>
            <div v-if="recommendJson.recommendType===3">
              <fieldset>
                <legend>会议推荐</legend>
                <el-form-item label="会议推荐范围">
                  <span class="selectioncontent">
                    <span v-for="(item,index) in recommendJson.recommendMeetingConfines" :key="index"><span v-if="index!==0">、</span>{{item}}</span>
                  </span>
                </el-form-item>
                <div style="clear:both"></div>
                <el-form-item label="会议推荐时间">
                  <span class="selectioncontent">
                    {{recommendJson.recommendMeetingTimeStart}} 至
                    {{recommendJson.recommendMeetingTimeEnd}}
                  </span>
                </el-form-item>
                <el-form-item label="参加会议推荐人数">
                  <span class="selectioncontent">
                    {{recommendJson.recommendMeetingTimes}}
                  </span>
                </el-form-item>
                <div v-for="item in meetingPersons" :key="item.id" style="clear:both">
                  <el-form-item label="推荐">
                    <span class="selectioncontent" style="margin-right:10px">
                      {{item.name}}
                    </span>
                    <span class="selectioncontent">
                      {{item.times}}
                    </span>
                    人
                  </el-form-item>
                </div>
              </fieldset>
            </div>
            <div style="clear:both"></div>
            <fieldset>
              <legend>谈话推荐</legend>
              <el-form-item label="谈话推荐范围">
                <span class="selectioncontent">
                  <span v-for="(item,index) in recommendJson.recommendTalkConfines" :key="index"><span v-if="index!==0">、</span>{{item}}</span>
                </span>
              </el-form-item>
              <div style="clear:both"></div>
              <el-form-item label="谈话推荐时间">
                <span class="selectioncontent">
                  {{recommendJson.recommendTalkTimeStart}} 至
                  {{recommendJson.recommendTalkTimeEnd}}
                </span>
              </el-form-item>
              <el-form-item label="参加谈话推荐人数">
                <span class="selectioncontent">
                  {{recommendJson.recommendTalkTimes}}
                </span>
              </el-form-item>
              <div v-for="item in talkPersons" :key="item.id" style="clear:both">
                <el-form-item label="推荐">
                <span class="selectioncontent" style="margin-right:10px">
                  {{item.name}}
                </span>
                <span class="selectioncontent">
                  {{item.times}}
                </span>
                    人
                </el-form-item>
              </div>
            </fieldset>
            <div v-if="recommendJson.recommendType===2">
              <fieldset>
                <legend>会议推荐</legend>
                <el-form-item label="会议推荐范围">
                  <span class="selectioncontent">
                    <span v-for="(item,index) in recommendJson.recommendMeetingConfines" :key="index"><span v-if="index!==0">、</span>{{item}}</span>
                  </span>
                </el-form-item>
                <div style="clear:both"></div>
                <el-form-item label="会议推荐时间">
                  <span class="selectioncontent">
                    {{recommendJson.recommendMeetingTimeStart}} 至
                    {{recommendJson.recommendMeetingTimeEnd}}
                  </span>
                </el-form-item>
                <el-form-item label="参加会议推荐人数">
                  <span class="selectioncontent">
                    {{recommendJson.recommendMeetingTimes}}
                  </span>
                </el-form-item>
                <div v-for="item in meetingPersons" :key="item.id" style="clear:both">
                  <el-form-item label="推荐">
                    <span class="selectioncontent" style="margin-right:10px">
                      {{item.name}}
                    </span>
                    <span class="selectioncontent">
                      {{item.times}}
                    </span>
                    人
                  </el-form-item>
                </div>
              </fieldset>
            </div>
            <el-form-item label="附件" prop="files">
              <div  v-for="(item, index) of tuijianForm.files" :key="index">
                <a :href="$http.defaults.baseURL+$http.defaults.selectionAPI+'api/gen/file/download?id='+item.id">{{item.fileName}}.{{item.fileType}}</a>
              </div>
            </el-form-item>
            <div style="clear:both"></div>
            <el-form-item label="工作组人员">
              <span class="selectioncontent">
                {{recommendJson.workingteam}}
              </span>
            </el-form-item>
            <div style="clear:both"></div>
            <el-form-item label="备注">
              <span class="selectioncontent">
                {{tuijianForm.remarks}}
              </span>
            </el-form-item>
            <div style="clear:both"></div>
            <el-form-item label="办理结果">
              <span class="selectioncontent">
                <template v-if="tuijianForm.stateRecommend===2">确定为考察对象，进入考察环节</template>
                <template v-else-if="tuijianForm.stateRecommend===3">未确定考察对象，干部选任终止</template>
              </span>
            </el-form-item>
          </el-form>
          <notice :noticePersonId="personId" step="3"></notice>
    </section>
  </div>
</template>

<script>
import notice from '../common/Notice'
export default {
  props: ['personId'],
  watch: {
    personId: {
      handler (val, oldVal) {
        console.log('val:' + val)
        if (val && val !== 0) {
          this.getData(val)
        }
      },
      immediate: true
    }
  },
  name: 'tuijian-details',
  components: {
    notice
  },
  data () {
    return {
      talkPersons: [],
      meetingPersons: [],
      loading: false,
      tableHeight: 100,
      params: {
        candidateUnit: '',
        currentJob: '',
        currentLevel: '',
        personId: 0
      },
      tuijianForm: {
        // comp: '',
        // radio: '',
        // thdate: '',
        // thnum: '',
        // thipt: '',
        // thnum2: '',
        // asyncItem: [
        //   {
        //     thnum: '',
        //     thipt: '',
        //     id: '001'
        //   }
        // ],
        // hydate: '',
        // hynum: '',
        // hyipt: '',
        // hynum2: '',
        // asyncItem2: [
        //   {
        //     hynum: '',
        //     hyipt: '',
        //     id: '00011'
        //   }
        // ],
        // beizhu: '',
        // workgroup: ''
      },
      recommendJson: {},
      files: [],
      fileList: []
    }
  },
  methods: {
    inRoles (str) {
      console.log(str)
      let arr = JSON.parse(localStorage.getItem('Roles'))
      // arr = 'aaabbROLE_admin'
      if (arr.indexOf(str) === -1) {
        return false
      } else {
        return true
      }
    },
    handleUploadSucc (response, file, fileList) {
      console.log(response)
      if (response.success) {
        this.files.push(response.result[0])
        this.$message({
          message: '上传成功！' + response.message,
          type: 'success'
        })
      } else {
        this.$message({
          message: '上传失败:' + response.message,
          type: 'error'
        })
      }
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    uploadError (err) {
      console.log(err)
      this.$message({
        message: '上传失败:' + err,
        type: 'error'
      })
    },
    addAsyncItem () {
      this.tuijianForm.asyncItem.push({
        thipt: '',
        thnum: '',
        id: Date.now()
      })
    },
    delAsyncItem (item) {
      var index = this.tuijianForm.asyncItem.indexOf(item)
      if (index !== -1) {
        this.tuijianForm.asyncItem.splice(index, 1)
      }
    },
    addAsyncItem2 () {
      this.tuijianForm.asyncItem2.push({
        hyipt: '',
        hynum: '',
        id: Date.now()
      })
    },
    delAsyncItem2 (item) {
      var index = this.tuijianForm.asyncItem2.indexOf(item)
      if (index !== -1) {
        this.tuijianForm.asyncItem2.splice(index, 1)
      }
    },
    formatFiles (files) {
      if (files && files.length > 0) {
        let newfiles = []
        for (let i = 0; i < files.length; i++) {
          newfiles.push({name: files[i].fileName + '.' + files[i].fileType, id: files[i].id})
        }
        console.log(newfiles)
        return newfiles
      }
    },
    getData (id) {
      if (id && id !== 0) {
        this.loading = true
        let url = this.$http.defaults.selectionAPI + 'api/selection/democraticRecommend/getInfo'
        this.$http.get(url, {
          params: {
            personId: id
          }
        }).then(res => {
          this.loading = false
          console.log(res)
          if (res.data.success === true) {
            this.tuijianForm = res.data.result
            this.recommendJson = JSON.parse(this.tuijianForm.recommendJson)
            this.talkPersons = this.recommendJson.recommendTalkPersons
            this.meetingPersons = this.recommendJson.recommendMeetingPersons
          }
        })
      }
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.$nextTick(function () {
        obj.tableHeight = clientHeight - 165
      })
    }
  },
  mounted () {
    this.tableresize(this)
    let _this = this
    window.onresize = function windowResize () {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      _this.tableresize(_this)
    }
  }
}
</script>
<style>
.tuijian-details .wboxnoborder .el-table{
  border: #95B8E7 solid 1px;
}
.tuijian-details .wboxnoborder .el-table th{
  font-weight: normal;
  background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
  text-align: center;
  border-right: #95B8E7 solid 1px;
  border-bottom: #95B8E7 solid 1px;
  min-height: 30px;
  line-height:30px;
}
.tuijian-details .wboxnoborder .el-table td, .el-table th{
  padding:0;
  font-size:var(--size14) !important;
  line-height: 20px;
  font-family: '宋体';
  text-align: center;
}
.tuijian-details .el-table__row{
  height: 50px;
}
.tuijian-details .el-form-item__content{
  font-weight: bolder;
}
</style>
<style scoped>
.tuijian-details {
  width: 100%;
}
.sel-tit {
  width: 100%;
  height: 32px;
  line-height: 32px;
  padding: 0 15px;
  box-sizing: border-box;
  float: left;
  color: #303133;
  text-align: right;
  font-size: 16px;
}
.sel-con {
  width: 100%;
  height: 32px;
  line-height: 32px;
  padding: 0 15px;
  box-sizing: border-box;
  float: left;
  color: #909399;
  border-bottom: 0.5px solid #909399;
  font-size: 14px;
}
.tuijian-details .wboxnoborder {
  padding: 0;
  width: 100%;
  background-color: #fff;
  margin: 0 10px;
  overflow: hidden;
}
</style>
